<template>
	<view class="container">
		<view class="container__header">
			<view class="container__header--left">
				<u-badge style="z-index: 999999;" type="info" max="99" :value="rejectNum" :offset="[-5,0]" absolute :show="rejectNum ? true : false"></u-badge>
				<u-button text="待复核" :plain="true" color="#2979ff" :customStyle="{'background-color': 'transparent'}" size="small" @click="goReject"></u-button>
			</view>
			<view class="container__header--center" @click="selectDateTime">
				<view class="">{{selectDate}}</view>
				<view class="container__header--center-icon">
					<image src="../../../../static/theme/default/home/calendar.png" mode=""></image>
				</view>
			</view>
			<view class="container__header--right">
			</view>
		</view>
		<u-overlay :show="calendarVisible" @click="calendarVisible = false" :opacity="0">
			<view class="calendar-box" @tap.stop>
				<zzx-calendar ref="zzx_calendar" :dotList="dotList" :dotStyle="{background: '#3C9CFF'}" @selected-change="changeDate" @days-change="changeMonth"></zzx-calendar>
			</view>
		</u-overlay>
		<view class="container-card" v-for="item in list" :key="item.id">
			<view class="container-card__head">
				<view class="container-card__head--left">{{item.obsname}}</view>
				<view class="container-card__head--right">
					<view class="container-card__status" style="color: #fa3534" v-if="item.flag == -1">已驳回</view>
					<view class="container-card__status" style="color: #3C9CFF" v-else-if="item.flag == 1">已登记</view>
					<view class="container-card__status" style="color: #F9AE3D" v-else-if="item.flag == 2">已审核</view>
					<view class="container-card__status" style="color: #ff6600" v-else-if="item.flag == 3">已出库</view>
				</view>
			</view>
			<view class="container-card__body" @click="goDetail(item)">
				<view class="container-card__body--title">{{item.title}}</view>
				<view class="container-card__body--des">
					<text>入库时间:</text>
					<text>{{item.plandate}}</text>
				</view>
				<view class="container-card__body--des">
					<text>执行人:</text>
					<text>{{item.myuser}}</text>
				</view>
				<view class="container-card__body--des">
					<text>备注:</text>
					<text>{{item.remarks}}</text>
				</view>
				<view class="container-card__body--des">
					<text>应用项目:</text>
					<text>{{item.wbsname}}</text>
				</view>
				<view class="container-card__body--des">
					<text>供货单位:</text>
					<text>{{item.supplier}}</text>
				</view>
				<view class="container-card__body--more">查看详情</view>
				<view class="container-card__body--id">
					<text>流水号:</text>
					<text>{{item.id}}</text>
				</view>
			</view>
		</view>
		<no-data v-if="!list.length"></no-data>
	</view>
</template>

<script>
	import _custom from '@/common/_custom.js'
	import moment from 'moment'
	import NoData from '@/components/custom/no-data/no-data.vue'
	import _data from '@/common/_data.js'
	
	export default {
		components: {
			NoData
		},
		data() {
			return {
				list: [],
				selectDate: moment().format('YYYY-MM-DD'),
				date: '',
				calendarVisible: false,
				dotList: [],
				rejectNum: 0,
				obsusername: _data.localData('name'),
			}
		},
		onShow() {
			this.getGoodsInList();
			this.getGoodsInCheckCount();
		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url: './detail?type=add'
			})
		},
		methods: {
			/**
			 * 获取入库数据
			 */
			getGoodsInList() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getGoodsInList',
					apiparam: {
						obsdate: this.selectDate
					},
					success(res) {
						that.list = res
					}
				})
			},
			/**
			 * 获取月中有数据的日期
			 */
			getGoodsInDaysInMonth() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getGoodsInDaysInMonth',
					apiparam: {
						month: moment(this.date).format('YYYY-MM')
					},
					success(res) {
						let temp = []
						res.forEach(v => {
							temp.push({
								date: moment(v.date).format('YYYY-MM-DD'),
								colors: ['#3C9CFF']
							})
						})
						that.dotList = temp;
					}
				})
			},
			/**
			 * 获取待复核数量
			 */
			getGoodsInCheckCount() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getGoodsInCheckCount',
					apiparam: {
						flag: -1,
						obsusername: this.obsusername
					},
					success(res) {
						that.rejectNum = res[0].count
					}
				})
			},
			//点击日期
			changeDate(v) {
				this.selectDate = v.fullDate;
				this.getGoodsInList();
				this.calendarVisible = false;
			},
			/**
			 * 日历左右滑动
			 * @param {Object} v 回调参数
			 */
			changeMonth(v) {
				//滑动切换月份
				if(v.type == 'swiper') {
					this.date = moment(v.start).format('YYYY-MM-DD');
					this.getGoodsInDaysInMonth();
				}
			},
			/**
			 * 点击日期
			 */
			selectDateTime() {
				this.getGoodsInDaysInMonth();
				this.calendarVisible = !this.calendarVisible;
				if(this.calendarVisible) {
					this.$nextTick(() => {
						this.$refs.zzx_calendar.selecteDate(this.selectDate);
					})
				}
			},
			goDetail(v) {
				uni.navigateTo({
					url: './detail?data=' + JSON.stringify(v) + '&type=edit'
				})
			},
			/**
			 * 点击驳回
			 */
			goReject() {
				uni.navigateTo({
					url: './reject'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding-top: 100rpx;
		
		&__header {
			height: 200rpx;
			position: fixed;
			width: 100%;
			top: 0;
			/* #ifdef H5 */
			top: 88rpx;
			/* #endif */
			z-index: 999;
			background-image: linear-gradient(to right, #6AD7F8,#10AADC);
			transition: all .2s ease-in-out;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20rpx;
			box-sizing: border-box;
			
			&--left,&--right {
				width: 120rpx;
				position: relative;
			}
			
			&--center {
				height: 100%;
				display: flex;
				align-items: center;
				&-icon {
					margin-left: 5rpx;
					width: 40rpx;
					height: 40rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		
		&-card {
			position: relative;
			margin: 20rpx;
			background-color: #fff;
			padding: 20rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			
			&__head {
				font-size: 25rpx;
				height: 70rpx;
				line-height: 70rpx;
				color: #aaa;
				display: flex;
				justify-content: space-between;
				
				&--left {
					flex: 5;
				}
				
				&--right {
					flex: 1;
					display: flex;
					justify-content: flex-end;
				}
			}
			
			&__status {
				font-size: 25rpx;
				text-align: right;
			}
			
			&__body {
				&--title {
					font-size: 30rpx;
					font-weight: bold;
					height: 80rpx;
					line-height: 80rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				
				&--des {
					font-size: 25rpx;
					color: #aaa;
				}
				
				&--more {
					margin-top: 20rpx;
					margin-bottom: 10rpx;
					font-size: 28rpx;
					color: #1E9FF2;
				}
				
				&--id {
					position: absolute;
					right: 30rpx;
					bottom: 30rpx;
					font-size: 25rpx;
					color: #666;
				}
			}
		}
	}
	
	.calendar-box {
		position: fixed;
		top: 100rpx;
		right: 10rpx;
		/* #ifdef H5 */
		top: 188rpx;
		/* #endif */
		width: 730rpx;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
		box-sizing: border-box;
	}
</style>
